<template>
	<view>
		<view class="detail_data">
			<view class="detail_data_title">
				<text class="gray3 fb">{{ $t('user.merchant_settlement') }}</text>
				<text class="gray9 f24">{{ $t('user.order_date') }}{{ detail.createTime }}</text>
			</view>
			<view class="detail_data_content">
				<view class="detail_data_item">
					<view class="data_price">{{ detail.orderMoney }}</view>
					<view class="data_txt">{{ $t('user.settlement_amount_info') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.payMoney }}</view>
					<view class="data_txt">{{ $t('user.payment_amount_info') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.expressMoney }}</view>
					<view class="data_txt">{{ $t('user.shipping_fee') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.realSupplierMoney }}</view>
					<view class="data_txt">{{ $t('user.merchant_income') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price"> {{ detail.supplierMoney }}</view>
					<view class="data_txt">{{ $t('user.total_settlement') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.refundMoney }}</view>
					<view class="data_txt">{{ $t('user.merchant_refund') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.agentMoney }}</view>
					<view class="data_txt">{{ $t('user.distribution_commission') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.sysMoney }}</view>
					<view class="data_txt">{{ $t('user.platform_commission') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.realSysMoney }}</view>
					<view class="data_txt">{{ $t('user.total_platform_commission') }}</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.refundSysMoney }}</view>
					<view class="data_txt">{{ $t('user.platform_refund_commission') }}</view>
				</view>
			</view>
		</view>
		<view class="detail_data">
			<view class="detail_data_title gray3 fb">{{ $t('user.product_info') }}</view>
			<view class="product-item mb20 " v-for="(item, index) in product_list" :key="index">
				<view class="d-s-c ww100 pitem-top">
					<image class="detail_prolist_img f-s-0" :src="item.productImage" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="d-b-c ww100 mb10">
							<view class="product-name text-ellipsis">{{ item.productName }}</view>
							<view class="gray9">X{{ item.totalNum }}</view>
						</view>
						<view v-if="item.productAttr != ''" class="gray9 mb10">{{ item.productAttr }}</view>
						<view class="d-b-c ww100">
							<view class="gray3 f24"><text
									class="gray9">{{ $t('user.payment_amount_info') }}:</text>{{ item.totalPayPrice }}
							</view>
							<view class="gray3 f24" v-if="item.refundMoney"><text
									class="gray9">{{ $t('user.refund_amount') }}:</text>{{ item.refundMoney || 0 }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_id: "", //订单id
			detail: {},
			product_list: [],
			specData: {},
			index: 0,
			price: 0,
		};
	},
	onLoad(e) {
		let self = this;
		self.settled_id = e.settled_id;
	},
	onShow() {
		this.getData();
		uni.setNavigationBarTitle({
			title: this.$t('order.order_info')
		})
	},
	methods: {
		//获取商品数据
		getData() {
			let self = this;
			self._post(
				"supplier/index/settledetail", {
				settledId: self.settled_id,
			},
				(res) => {
					self.product_list = res.data.order.product;
					self.detail = res.data.model;
				}
			);
		},
	},
};
</script>

<style>
.detail_data {
	padding: 0 20rpx;
	margin: 0 auto;
}

.detail_data_title {
	font-size: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 94rpx;
}

.detail_data_content {
	background-color: #fff;
	border-radius: 15rpx;
	padding-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
}

.detail_data_item {
	width: 33.3%;
	margin: 15rpx 0;
	text-align: center;
	position: relative;
}

.data_price {
	color: #333;
	font-size: 32rpx;
	margin-bottom: 14rpx;
}

.data_txt {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 30rpx;
}

.detail_data_item::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	width: 1rpx;
	height: 28rpx;
	background: #EEEEEE;
}

.detail_data_item:nth-child(3n)::after {
	height: 0;
}

.detail_data_item:last-child::after {
	height: 0;
}

.detail_prolist_img {
	width: 96rpx;
	height: 96rpx;
	border-radius: 15rpx;
	margin-right: 15rpx;
	display: block;
}

.product-name {
	font-size: 28rpx;
	color: #333;
}

.product-item {
	background: #fff;
	border-radius: 25rpx;
	padding: 0 24rpx;
}

.pitem-top {
	padding: 26rpx 0;
}
</style>